<template>
	<sl-page title="关注">
		<z-paging ref="paging" :paging-style="{'margin-top':CustomBar + 'px'}" v-model="followList" @query="loadPage">
			<List :listDatas="followList">
				<template v-slot="{ item }">
					<view class="follow">
						<view class="flex" @click="toTargetTenant(item.tenantId)">
							<view class="follow-goods-image">
								<sl-image :value="item.tenantImage"></sl-image>
							</view>
							<view class="">{{ item.tenantName }}</view>
						</view>
						<view class="follow-button" @click="cancel(item)">
							<view>取消关注</view>
						</view>
					</view>
				</template>
			</List>
		</z-paging>
	</sl-page>
</template>

<script>
	import TenantApi from '@/api/tenant/tenant.js';
	import List from '@/pages/components/list/list.vue';
	import Constants from '@/constants';

	export default {
		//
		name: 'follow',
		//
		mixins: [Constants],
		//
		components: {
			List
		},
		//
		data() {
			return {
				options: {},
				followList: [],
				CustomBar:10,
			};
		},
		//
		onLoad(options) {
			this.options = options;
			let custom = uni.getMenuButtonBoundingClientRect();
			this.CustomBar = custom.bottom + custom.top - this.StatusBar +10;
		},
		//
		methods: {
			//获取关注
			loadPage: async function() {
				try {
					let res = await TenantApi.tenants();
					console.log('【获取关注数据】:', res.obj);
					this.$refs.paging.complete(res.obj.data);
				} catch (error) {
					console.error('【获取关注失败】:', error);
					this.$refs.paging.complete(false);
				}
			},
			//取消关注
			cancel: async function(item) {
				let app = this;
				let attention = item;
				TenantApi.attention_tenant(attention).then(result => {
					if (result.success) {
						this.$app.toast('取消关注成功');
						this.$refs.paging.reload();
					}
				});
			},
			//跳转到店铺
			toTargetTenant(id) {
				this.$app.navTo(this.pages.goodsTenantPage, {
					tenantId: id
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.follow {
		font-size: $uni-font-size-base;
		display: flex;
		justify-content: space-between;

		.follow-goods-image {
			position: relative;
			width: 128rpx;
			height: 128rpx;
			overflow: hidden;
			border: 2rpx solid #CCCCCC;
			margin-right: 34rpx;
			border-radius: 12rpx;
		}

		.follow-button {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 52rpx;
			padding: 24rpx 32rpx;
			justify-content: center;
			align-items: center;
			gap: 10px;
			flex-shrink: 0;
			border-radius: 38px;
			border: 2rpx solid #CCC;
			color: rgba(204, 204, 204, 1);
		}
	}
</style>